<template>
  <div class="fr page">
    
            <div class="sui-pagination clearfix">
              <ul>
                <li @click="$emit('getpageNo',1)">
                <a href="#" >«上一页</a>
                  
                </li>
                <li  @click="$emit('getpageNo',1)" v-if="startNumandendNUm.start>1">
                  <a href="#" >1</a>
                </li>
                <li class="dotted" v-if="startNumandendNUm.start>2"><span>...</span></li>
                <li v-for="(page,index) in startNumandendNUm.end" 
                :key="index" v-if="page>=startNumandendNUm.start" @click="$emit('getpageNo',page)"
                :class="{active:pageNo==page}"><a>{{page}}</a></li>
                <li class="dotted" v-if="startNumandendNUm.end<totalPage-1"><span>...</span></li>
                <li>
                  <a href="#" v-if="startNumandendNUm.end<totalPage" @click="$emit('getpageNo',totalPage)">{{totalPage}}</a>
                </li>
                <li class="next">
                  <a href="#" :disabled="pageNo==total" @click="$emit('getpageNo',pageNo+1)">下一页»</a>
                </li>
                <li>共{{total}}条&nbsp;</li>
              </ul>
              <div></div>
            </div>
          </div>
</template>

<script>
export default {
  name:'Pagination',
    props:['pageNo','pageSize','total','continues'],
    computed:{
        totalPage(){
            //向上取证
            return Math.ceil(this.total/this.pageSize)
        },
        //计算出连续页码的起始数字和结束数字
        startNumandendNUm(){
          let start=0,end=0
          //定义两个变量存储开始数字和结束数字
          if(this.continues>this.totalPage){
            start=1,
            end=this.totalPage
          }else{
            start=this.pageNo-parseInt(this.continues/2)
            end=this.pageNo+parseInt(this.continues/2)
            //开始页码小于1，纠正
            if(start<1){
              start=1
              end=this.continues
            }
            //结束页码大于总页码纠正
            if(end>this.totalPage){
              end=this.totalPage
              start=this.totalPage-this.continues+1
            }
          }
          return {start,end}
        }
    }
}
</script>

<style lang="less" scoped>
.page {
        width: 733px;
        height: 66px;
        overflow: hidden;
        float: right;
        .sui-pagination {
          margin: 18px 0;
          ul {
            margin-left: 0;
            margin-bottom: 0;
            vertical-align: middle;
            width: 690px;
            float: left;
            li {
              line-height: 18px;
              display: inline-block;
              a {
                position: relative;
                float: left;
                line-height: 18px;
                text-decoration: none;
                border: 1px solid #e0e9ee;
                margin-left: -1px;
                font-size: 14px;
                padding: 9px 18px;
                color: #333;
              }
              &.active {
                a {
                  background-color:antiquewhite;
                  color: #e1251b;
                  border-color: #fff;
                  cursor: default;
                }
              }
              &.prev {
                a {
                  background-color: #fafafa;
                }
              }
              &.disabled {
                a {
                  color: #999;
                  cursor: default;
                }
              }
              &.dotted {
                span {
                  margin-left: -1px;
                  position: relative;
                  float: left;
                  line-height: 18px;
                  text-decoration: none;
                  background-color: #fff;
                  font-size: 14px;
                  border: 0;
                  padding: 9px 18px;
                  color: #333;
                }
              }
              &.next {
                a {
                  background-color: #fafafa;
                }
              }
            }
          }
          div {
            color: #333;
            font-size: 14px;
            float: right;
            width: 241px;
          }
        }
      }
</style>